<template>
  <div class="cgl-container">
    <!-- 头部标题 -->
    <div class="header">
      <div class="titleMain">镀锌炉辊张力辊打滑预警模型</div>
    </div>

    <!-- Top Charts Area -->
    <div class="top-charts-panel">
      <div class="chart-card status-chart">
        <div class="chart-header">
          <div class="title-bar">
            <span class="blue-bar"></span>
            <span class="title-text">工艺辊服役状态</span>
          </div>
          <div class="chart-buttons">
            <el-radio-group v-model="barChartType" size="small" @change="updateBarChart">
              <el-radio-button label="超差辊"></el-radio-button>
              <el-radio-button label="公里数"></el-radio-button>
              <el-radio-button label="粗糙度"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-content" ref="statusBarChartRef"></div>
      </div>
      <div class="chart-card line-chart">
        <div class="chart-header">
          <div class="title-bar">
            <span class="blue-bar"></span>
            <span class="title-text">入口段</span>
          </div>
          <div class="chart-controls">
            <el-select v-model="torqueSelect1" placeholder="关键辊转矩" size="small" class="torque-select">
              <el-option label="关键辊转矩" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-content" ref="lineChart1Ref"></div>
      </div>
      <div class="chart-card line-chart">
        <div class="chart-header">
          <div class="title-bar">
            <span class="blue-bar"></span>
            <span class="title-text">工艺段</span>
          </div>
          <div class="chart-controls">
            <el-select v-model="torqueSelect2" placeholder="关键辊转矩" size="small" class="torque-select">
              <el-option label="关键辊转矩" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-content" ref="lineChart2Ref"></div>
      </div>
      <div class="chart-card line-chart">
        <div class="chart-header">
          <div class="title-bar">
            <span class="blue-bar"></span>
            <span class="title-text">出口段</span>
          </div>
          <div class="chart-controls">
            <el-select v-model="torqueSelect3" placeholder="关键辊转矩" size="small" class="torque-select">
              <el-option label="关键辊转矩" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-content" ref="lineChart3Ref"></div>
      </div>
      <div class="chart-card line-chart">
        <div class="chart-header">
          <div class="title-bar">
            <span class="blue-bar"></span>
            <span class="title-text">活套底辊</span>
          </div>
          <div class="chart-controls">
            <el-select v-model="torqueSelect4" placeholder="关键辊转矩" size="small" class="torque-select">
              <el-option label="关键辊转矩" value="1"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-content" ref="lineChart4Ref"></div>
      </div>
    </div>

    <!-- Process Flow and Stats Area -->
    <div class="process-stats-panel">
      <!-- 报警信息 - 左上角 -->
      <div class="warning-banner warning-banner-top-left">
        <i class="fa fa-exclamation-triangle"></i> 报警信息 {{ warningMessage }}
      </div>
      
      <!-- 张力信息 - 右上角 -->
      <div class="tension-info tension-info-top-right">
        设定张力: <strong>{{ tensionInfo.set }}KN</strong> 实际张力: <strong>{{ tensionInfo.actual }}KN</strong>
      </div>
      
      <!-- 酸轧厚度板形判别调优模型图 (替代SVG) -->
      <div class="process-diagram">
        <!-- 流程线条 -->
        <div class="process-flow-lines">
          <div class="flow-line horizontal-main"></div>
          <div class="flow-line vertical-line1"></div>
          <div class="flow-line vertical-line2"></div>
          <div class="flow-line vertical-line3"></div>
          <div class="flow-line vertical-line4"></div>
          <div class="flow-dot dot1"></div>
          <div class="flow-dot dot2"></div>
          <div class="flow-dot dot3"></div>
          <div class="flow-dot dot4"></div>
          <div class="flow-dot dot5"></div>
        </div>
        
        <!-- 数据流动效果 -->
        <div class="data-flow">
          <div class="data-particle particle1"></div>
          <div class="data-particle particle2"></div>
          <div class="data-particle particle3"></div>
          <div class="data-particle particle4"></div>
        </div>
        
        <!-- 统计卡片容器 -->
        <div class="stats-overlay-container">
          <div class="stat-card stat1">
            <div class="stat-card-bg"></div>
            <div class="stat-card-content">
              <div class="stat-title">日产量统计</div>
              <div class="stat-value">{{ productionStats.dailyOutput }} <span class="unit">吨</span></div>
              <div class="stat-icon">
                <i class="fa fa-chart-line"></i>
              </div>
            </div>
            <div class="stat-card-glow"></div>
          </div>
          
          <div class="stat-card stat2">
            <div class="stat-card-bg"></div>
            <div class="stat-card-content">
              <div class="stat-title">实际小时吨钢</div>
              <div class="stat-value">{{ productionStats.actualHourlyOutput }} <span class="unit">吨</span></div>
              <div class="stat-icon">
                <i class="fa fa-cog fa-spin"></i>
              </div>
            </div>
            <div class="stat-card-glow"></div>
          </div>
          
          <div class="stat-card stat3">
            <div class="stat-card-bg"></div>
            <div class="stat-card-content">
              <div class="stat-title">小时吨钢</div>
              <div class="stat-value">{{ productionStats.hourlyOutput }} <span class="unit">吨</span></div>
              <div class="stat-icon">
                <i class="fa fa-cog"></i>
              </div>
            </div>
            <div class="stat-card-glow"></div>
          </div>
          
          <div class="stat-card stat4">
            <div class="stat-card-bg"></div>
            <div class="stat-card-content">
              <div class="stat-title">工艺段速度</div>
              <div class="stat-value">{{ productionStats.processSpeed }} <span class="unit">吨</span></div>
              <div class="stat-icon">
                <i class="fa fa-tachometer-alt"></i>
              </div>
            </div>
            <div class="stat-card-glow"></div>
          </div>
        </div>
        
        <!-- 科技感装饰元素 -->
        <div class="tech-decorations">
          <div class="tech-circle circle1"></div>
          <div class="tech-circle circle2"></div>
          <div class="tech-hexagon hex1"></div>
          <div class="tech-hexagon hex2"></div>
          <div class="tech-scan-line"></div>
        </div>
      </div>
    </div>

    <!-- Warning Banner -->

    <!-- Bottom Table Area -->
    <div class="bottom-panel">
      <div class="tables-wrapper">
        <!-- Left Table Card -->
        <div class="table-card left-table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>报警时间与原因</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table
            :data="tableData"
            class="left-table"
            style="width: 100%; height: 100%;"
            border
            size="small"
            :header-cell-style="rightTableHeaderStyle"
            :cell-style="rightTableCellStyle"
          >
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column prop="slipReason" label="打滑原因" min-width="120" />
          </el-table>
        </div>

        <!-- Right Table Card -->
        <div class="table-card right-table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>详细信息</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table
            :data="tableData"
            class="right-table"
            style="width: 100%; height: 100%;"
            border
            size="small"
            :header-cell-style="rightTableHeaderStyle"
            :cell-style="rightTableCellStyle"
          >
            <el-table-column prop="slipRollNo" label="打滑辊号" />
            <el-table-column prop="coilNo" label="卷号" width="70" />
            <el-table-column prop="steelGradeWidth" label="钢种宽" width="80" />
            <el-table-column prop="steelGradeThickness" label="钢种厚度" width="90" />
            <el-table-column prop="possibleSlipPos" label="可能打滑位" width="100"/>
            <el-table-column prop="rollName" label="辊名" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';

// Register ECharts components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  MarkLineComponent
]);

// --- Refs for Charts ---
const statusBarChartRef = ref<HTMLElement | null>(null);
const lineChart1Ref = ref<HTMLElement | null>(null);
const lineChart2Ref = ref<HTMLElement | null>(null);
const lineChart3Ref = ref<HTMLElement | null>(null);
const lineChart4Ref = ref<HTMLElement | null>(null);

// --- ECharts Instances ---
let statusBarChartInstance: echarts.ECharts | null = null;
let lineChart1Instance: echarts.ECharts | null = null;
let lineChart2Instance: echarts.ECharts | null = null;
let lineChart3Instance: echarts.ECharts | null = null;
let lineChart4Instance: echarts.ECharts | null = null;

// --- 柱状图类型选择 ---
const barChartType = ref('超差辊');

// --- State ---
const torqueSelect1 = ref('1');
const torqueSelect2 = ref('1');
const torqueSelect3 = ref('1');
const torqueSelect4 = ref('1');

// --- Table Styles (Adopted from XGRPH.vue) ---
const rightTableHeaderStyle = {
  background: '#183272', // Darker blue for header
  color: '#b8e8ff',
  padding: '6px 0',
  textAlign: 'center',
  fontWeight: 'normal',
  borderBottom: '1px solid #06279d' // Use the border color from image
};

const rightTableCellStyle = {
  padding: '6px 0',
  textAlign: 'center',
  color: '#c0c4cc',
  borderBottom: '1px solid #06279d',
  borderRight: '1px solid #06279d',
  fontSize: '12px'
  // Background will be handled by alternating row styles in CSS
};

// --- 生产统计信息 ---
const productionStats = reactive({
  dailyOutput: 1028.3,
  actualHourlyOutput: 152.5,
  hourlyOutput: 135.0,
  processSpeed: 210.7
});

// --- 张力信息 ---
const tensionInfo = reactive({
  set: 8.0,
  actual: 2.5
});

// --- 警告信息 ---
const warningMessage = ref('后卷过度异常, 模型进行了**调整');

interface TableRow {
  time: string;
  slipReason: string;
  slipRollNo: string;
  coilNo: number;
  steelGradeWidth: number;
  steelGradeThickness: number;
  possibleSlipPos: string;
  rollName: string;
}

// --- 表格数据 ---
const tableData = ref<TableRow[]>([
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
  { time: '2025-04-01 17: 32: 08', slipReason: '张力过度', slipRollNo: 'Hooting1 Deflector R1', coilNo: 1, steelGradeWidth: 10, steelGradeThickness: 2, possibleSlipPos: '--', rollName: 'Deflector R1' },
]);

// --- 柱状图数据 ---
const barChartData = {
  '超差辊': [35000, 45000, 30000, 45000, 25000, 40000, 35000, 30000],
  '公里数': [10000, 30000, 15000, 25000, 20000, 10000, 15000, 20000],
  '粗糙度': [15000, 5000, 10000, 5000, 25000, 15000, 10000, 15000]
};

// --- 标准值 ---
const standardValues = {
  '超差辊': 32000,
  '公里数': 18000,
  '粗糙度': 12000
};

// --- 图表配置 ---
const baseBarOption = {
    tooltip: { 
      trigger: 'axis', 
      axisPointer: { type: 'shadow' },
      formatter: function(params: any[]) {
        let tooltipText = `${params[0].name}<br/>`;
        params.forEach(param => {
          tooltipText += `${param.marker}${param.seriesName}: ${param.value}<br/>`;
        });
        return tooltipText;
      }
    },
    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
    legend: {
        data: [] as string[],
        top: '5%',
        textStyle: { color: '#c0c4cc' }
    },
    xAxis: [{ 
      type: 'category', 
      data: [] as string[], 
      axisTick: { alignWithLabel: true }, 
      axisLabel: { color: '#c0c4cc', fontSize: 10 } 
    }],
    yAxis: [{ 
      type: 'value', 
      axisLabel: { color: '#c0c4cc', fontSize: 10 }, 
      splitLine: { lineStyle: { color: '#3a5a8a', opacity: 0.3 } } 
    }],
    series: [] as any[]
};

// 柱状图配置
const statusBarChartOption = computed(() => {
  const currentDataType = barChartType.value as keyof typeof barChartData;
  const actualData = barChartData[currentDataType];
  const stdValue = standardValues[currentDataType];
  const standardData = Array(actualData.length).fill(stdValue);
  const xAxisData = ['R1', 'R3', 'R5', 'R7', 'R9', 'R11', 'R13', 'R15'];

  const series = [
    {
      name: barChartType.value,
      type: 'bar',
      barWidth: '30%',
      data: actualData,
      itemStyle: { 
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: barChartType.value === '超差辊' ? '#42b4ff' : barChartType.value === '公里数' ? '#67c23a' : '#e6a23c' },
          { offset: 1, color: 'rgba(11, 41, 96, 0.8)' }
        ]),
        borderRadius: [5, 5, 0, 0],
        shadowColor: barChartType.value === '超差辊' ? 'rgba(66, 180, 255, 0.5)' : 
                      barChartType.value === '公里数' ? 'rgba(103, 194, 58, 0.5)' : 'rgba(230, 162, 60, 0.5)',
        shadowBlur: 10
      }
    },
    {
      name: '标准值',
      type: 'bar',
      barWidth: '30%',
      data: standardData,
      itemStyle: { 
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ff7043' },
          { offset: 1, color: 'rgba(255, 112, 67, 0.5)' }
        ]),
        borderRadius: [5, 5, 0, 0],
        shadowColor: 'rgba(255, 112, 67, 0.5)',
        shadowBlur: 8
      }
    }
  ];

  return {
    ...baseBarOption,
    legend: {
        ...baseBarOption.legend,
        data: [barChartType.value, '标准值']
    },
    xAxis: [{ 
      ...baseBarOption.xAxis[0], 
      data: xAxisData,
      axisLine: { lineStyle: { color: '#3a5a8a' } }
    }],
    yAxis: [{
      ...baseBarOption.yAxis[0],
      axisLine: { lineStyle: { color: '#3a5a8a' } },
      max: 50000,
      interval: 10000
    }],
    series: series
  };
});

// 更新柱状图
const updateBarChart = () => {
  if (statusBarChartInstance) {
    const currentDataType = barChartType.value as keyof typeof barChartData;
    const actualData = barChartData[currentDataType];
    const stdValue = standardValues[currentDataType];
    const standardData = Array(actualData.length).fill(stdValue);

    statusBarChartInstance.setOption({
      legend: {
        data: [barChartType.value, '标准值']
      },
      series: [
        {
          name: barChartType.value,
          data: actualData,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: barChartType.value === '超差辊' ? '#42b4ff' : barChartType.value === '公里数' ? '#67c23a' : '#e6a23c' },
              { offset: 1, color: 'rgba(11, 41, 96, 0.8)' }
            ]),
            shadowColor: barChartType.value === '超差辊' ? 'rgba(66, 180, 255, 0.5)' : 
                          barChartType.value === '公里数' ? 'rgba(103, 194, 58, 0.5)' : 'rgba(230, 162, 60, 0.5)',
          }
        },
        {
          name: '标准值',
          data: standardData
        }
      ]
    });
  }
};

// 线图配置 - 与图片匹配的数据和样式
const lineChartOption1 = computed(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    legend: { 
      data: ['指标A', '指标B'],
      textStyle: { color: '#fff', fontSize: 12 },
      formatter: function(name: string) {
        return name === '指标A' ? '指标A' : '指标B';
      },
      selectedMode: false,
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      top: '5%',
      itemGap: 20
    },
    grid: { 
      left: '5%', 
      right: '5%', 
      bottom: '10%', 
      top: '25%', 
      containLabel: true 
    },
    xAxis: { 
      type: 'category', 
      boundaryGap: false, 
      data: ['T0', 'T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9'],
      axisLine: { lineStyle: { color: '#3a5a8a' } },
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'value', 
      min: 0,
      max: 8,
      interval: 2,
      axisLabel: { color: '#c0c4cc', fontSize: 10 }, 
      splitLine: { lineStyle: { color: '#3a5a8a', opacity: 0.3 } },
      axisLine: { lineStyle: { color: '#3a5a8a' } }
    },
    series: [
        { 
            name: '指标A', 
            type: 'line', 
            smooth: true, 
            symbolSize: 6,
            symbol: 'circle',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(58, 218, 255, 0.8)' },
                { offset: 1, color: 'rgba(11, 41, 96, 0.1)' }
              ])
            },
            emphasis: { focus: 'series' }, 
            data: [5.2, 4.1, 4.3, 4.8, 4.2, 4.7, 5.5, 6.0, 5.2, 4.0], 
            itemStyle: { 
              color: '#5dd1fa',
              shadowColor: 'rgba(93, 209, 250, 0.8)',
              shadowBlur: 10
            },
            lineStyle: { 
              width: 3,
              shadowColor: 'rgba(93, 209, 250, 0.8)',
              shadowBlur: 10
            }
        },
        { 
            name: '指标B', 
            type: 'line', 
            smooth: true,
            symbolSize: 6,
            symbol: 'circle',
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(150, 220, 90, 0.6)' },
                { offset: 1, color: 'rgba(11, 41, 96, 0.1)' }
              ])
            }, 
            emphasis: { focus: 'series' }, 
            data: [3.0, 2.1, 3.5, 4.0, 2.8, 2.1, 1.5, 2.3, 2.0, 1.8], 
            itemStyle: { 
              color: '#91cc75',
              shadowColor: 'rgba(145, 204, 117, 0.8)',
              shadowBlur: 10
            },
            lineStyle: { 
              width: 3, 
              type: 'dashed',
              shadowColor: 'rgba(145, 204, 117, 0.8)',
              shadowBlur: 5
            }
        }
    ]
}));

const baseLineOption = {
    tooltip: { trigger: 'axis' },
    legend: { 
      data: [] as string[], 
      textStyle: { color: '#c0c4cc' }, 
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      top: '5%',
      itemGap: 20
    },
    grid: { left: '5%', right: '5%', bottom: '10%', top: '25%', containLabel: true },
    xAxis: { 
      type: 'category', 
      boundaryGap: false, 
      data: [] as string[], 
      axisLabel: { color: '#c0c4cc', fontSize: 10 },
      splitLine: { show: false }
    },
    yAxis: { 
      type: 'value', 
      axisLabel: { color: '#c0c4cc', fontSize: 10 }, 
      splitLine: { lineStyle: { color: '#3a5a8a', opacity: 0.3 } },
      min: 0,
      max: 8
    },
    series: [] as any[]
};

// --- SVG交互 ---
const onSvgLoaded = () => {
  console.log("SVG图片加载完成");
  
  // 简化SVG加载事件，暂时移除SVG DOM操作
  try {
    // SVG加载成功
    console.log("SVG加载成功");
  } catch (error) {
    console.error("SVG操作失败:", error);
  }
};

// --- 初始化图表 ---
const initCharts = () => {
   try {
      if (statusBarChartRef.value && !statusBarChartInstance) {
        statusBarChartInstance = echarts.init(statusBarChartRef.value);
        statusBarChartInstance.setOption(statusBarChartOption.value);
      }
      
      const lineChartOption = lineChartOption1.value;
      
      if (lineChart1Ref.value && !lineChart1Instance) {
        lineChart1Instance = echarts.init(lineChart1Ref.value);
        lineChart1Instance.setOption(lineChartOption); 
      }
      if (lineChart2Ref.value && !lineChart2Instance) {
        lineChart2Instance = echarts.init(lineChart2Ref.value);
        lineChart2Instance.setOption(lineChartOption); 
      }
      if (lineChart3Ref.value && !lineChart3Instance) {
        lineChart3Instance = echarts.init(lineChart3Ref.value);
        lineChart3Instance.setOption(lineChartOption); 
      }
      if (lineChart4Ref.value && !lineChart4Instance) {
        lineChart4Instance = echarts.init(lineChart4Ref.value);
        lineChart4Instance.setOption(lineChartOption); 
      }
   } catch (error) {
       console.error("图表初始化失败:", error);
   }
};

// 动态更新数据
const updateData = () => {
  // 更新生产统计信息（小幅度波动）
  productionStats.dailyOutput = parseFloat((1028.3 + (Math.random() * 10 - 5)).toFixed(1));
  productionStats.actualHourlyOutput = parseFloat((152.5 + (Math.random() * 5 - 2.5)).toFixed(1));
  productionStats.hourlyOutput = parseFloat((135.0 + (Math.random() * 4 - 2)).toFixed(1));
  productionStats.processSpeed = parseFloat((210.7 + (Math.random() * 8 - 4)).toFixed(1));
  
  // 更新张力信息（小幅度波动）
  tensionInfo.actual = parseFloat((2.5 + (Math.random() * 0.6 - 0.3)).toFixed(1));
};

const resizeCharts = () => {
  statusBarChartInstance?.resize();
  lineChart1Instance?.resize();
  lineChart2Instance?.resize();
  lineChart3Instance?.resize();
  lineChart4Instance?.resize();
};

// --- 生命周期钩子 ---
let updateTimer: number | null = null;

onMounted(() => {
  // 延迟初始化图表，确保DOM已渲染
  nextTick(() => {
    setTimeout(initCharts, 100);
  });
  
  window.addEventListener('resize', resizeCharts);
  
  // 设置定时更新
  updateTimer = window.setInterval(updateData, 3000);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeCharts);
  statusBarChartInstance?.dispose();
  lineChart1Instance?.dispose();
  lineChart2Instance?.dispose();
  lineChart3Instance?.dispose();
  lineChart4Instance?.dispose();
  
  // 清除定时器
  if (updateTimer !== null) {
    clearInterval(updateTimer);
  }
});

</script>

<style scoped>
.cgl-container {
  position: relative;
  background: url('../../assets/images/body-bg.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  flex: 0 0 60px;
  background-image: url('../../assets/images/head-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 10;
  padding-top: 3px;
  margin-bottom: -15px;
}

.titleMain {
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0 10px #42b4ff, 0 0 20px #0a2466;
  letter-spacing: 2px;
}

/* Top Charts Panel */
.top-charts-panel {
  display: flex;
  margin: 0 5px;
  height: 190px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.chart-card {
  /* background-image: url('../../assets/img/itme_bg.png'); */ /* 移除背景图 */
  /* background-size: cover; */
  /* background-position: center; */
  background-color: rgba(28, 58, 99, 0.7); /* 设置半透明背景色 */
  border: 1px solid rgba(90, 130, 190, 0.4);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  margin-right: 5px;
  box-shadow: 0 0 15px rgba(11, 93, 209, 0.2);
}

.chart-card:last-child {
  margin-right: 0;
}

.status-chart { flex: 1.5; }
.line-chart { flex: 1; }

.chart-header {
  background-image: url('../../assets/img/sub_title_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  height: 30px;
  width: 100%;
  border-bottom: 1px solid rgba(58, 90, 138, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.blue-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  background-color: #42b4ff;
  margin-right: 8px;
  box-shadow: 0 0 8px #42b4ff;
}

.title-text {
  font-size: 13px;
  font-weight: bold;
  color: #A2DFFF;
  text-shadow: 0 0 5px rgba(66, 180, 255, 0.5);
}

.chart-buttons {
  padding-right: 10px;
}

:deep(.el-radio-button__inner) {
  background-color: transparent;
  border: none;
  color: #a0a3a8;
  padding: 4px 8px;
  font-size: 12px;
  height: 24px;
  line-height: 16px;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  color: #42b4ff;
  border-bottom: 2px solid #42b4ff;
  background-color: transparent;
  box-shadow: none;
  text-shadow: 0 0 5px #42b4ff;
}

:deep(.el-radio-button:first-child .el-radio-button__inner),
:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0px;
}

.chart-controls {
  padding-right: 10px;
}

/* 深度选择器修改 el-select 内部元素的样式 */
:deep(.torque-select .el-select__wrapper) {
  background-color: rgba(41, 121, 255, 0.2) !important;
  border: 1px solid #42b4ff !important;
  box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
  height: 22px !important;
  width: 110px;
}

:deep(.torque-select .el-input__inner) {
  height: 20px !important;
  line-height: 20px !important;
  font-size: 11px !important;
  color: #fff !important;
  padding: 0 10px;
}

:deep(.torque-select .el-select__caret) {
  font-size: 11px !important;
  color: #42b4ff;
}

:deep(.torque-select .el-select__placeholder) {
  font-size: 11px !important;
  color: #a0a3a8;
}

.chart-content {
  flex-grow: 1;
  width: 100%;
  height: calc(100% - 30px);
}

/* Process Stats Panel */
.process-stats-panel {
  flex-grow: 1;
  margin: 10px 5px 5px;
  position: relative;
  background-image: url('../../assets/svgs/CGL1870.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 250px;
}

.process-diagram {
  position: relative;
  width: 100%;
  height: 100%;
}

.stats-overlay-container {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 4%;
  z-index: 5;
}

.stat-card {
  position: relative;
  width: 180px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(3px);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(66, 180, 255, 0.4);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('../../assets/img/zl-pic52.png') center bottom no-repeat;
  background-size: contain;
  z-index: 0;
  border-radius: 8px;
  filter: brightness(1.2);
}

.stat-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
}

.stat-title {
  font-size: 13px;
  color: #a2cfff;
  margin-bottom: 8px;
  text-shadow: 0 0 5px rgba(100, 180, 255, 0.7);
  font-weight: 500;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px rgba(100, 180, 255, 0.8);
  line-height: 1.2;
}

.stat-value .unit {
  font-size: 13px;
  font-weight: normal;
  opacity: 0.8;
  margin-left: 3px;
}

.stat-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(66, 180, 255, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 8px rgba(66, 180, 255, 0.4);
  animation: rotate-icon 12s infinite linear;
}

@keyframes rotate-icon {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.stat-icon i {
  font-size: 15px;
  color: #6dc7ff;
}

.stat-card-glow {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 8px;
  background: rgba(66, 180, 255, 0.7);
  border-radius: 50%;
  filter: blur(7px);
  animation: glow 2.5s infinite alternate;
  z-index: 0;
}

@keyframes glow {
  0% { opacity: 0.4; width: 65%; }
  100% { opacity: 0.8; width: 75%; }
}

.tension-info {
  position: absolute;
  top: 3px;
  right: 10px;
  font-size: 12px;
  color: #c0c4cc;
}

.tension-info strong {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(41, 121, 255, 0.7);
}

/* Warning Banner */
.warning-banner {
  width: 400px;
  background-color: rgba(255, 77, 79, 0.8);
  color: #fff;
  padding: 4px 15px;
  margin: 0 5px 5px;
  font-size: 13px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ea0f0f;
  box-shadow: 0 0 10px rgba(255, 77, 79, 0.5);
  animation: flash 2s infinite;
}

.warning-banner i {
  margin-right: 8px;
  color: #fff;
}

/* Bottom Panel Styles */
.bottom-panel {
  padding: 5px;
  flex-shrink: 0;
  height: 190px;
}

/* Wrapper for the two table cards */
.tables-wrapper {
  display: flex;
  height: 100%;
  gap: 5px;
}

/* General Table Card Style */
.table-card {
  display: flex;
  flex-direction: column;
  background-color: rgba(28, 58, 99, 0.7);
  border: 1px solid rgba(90, 130, 190, 0.4);
  box-shadow: 0 0 15px rgba(11, 93, 209, 0.2);
  overflow: hidden;
}

/* Style for left table card */
.left-table-card {
  flex-shrink: 0;
  width: 300px;
}

/* Style for right table card */
.right-table-card {
  flex-grow: 1;
}

/* Card Header Style (similar to chart headers) */
.card-header {
  background-image: url('../../assets/img/sub_title_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 6px 15px;
  font-weight: bold;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(58, 90, 138, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5vh;
  line-height: 3.5vh;
}

/* Style for the title text span */
.card-header span {
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bolder;
  font-size: 1.7vh;
}

/* Copied Icon Styles from NewCoilCard */
.title-icon-left {
  margin-right: 1vw;
  transform: rotateY(180deg);
  width: 2vw;
  height: 3vh;
  background-image: url(/src/assets/images/title-icon-right.png);
  background-size: 100% 100%;
}

.title-icon-right {
  margin-left: 1vw;
  width: 2vw;
  height: 3vh;
  background-image: url(/src/assets/images/title-icon-right.png);
  background-size: 100% 100%;
}

/* Ensure tables fill the card content area */
.left-table,
.right-table {
  flex-grow: 1;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  border: none !important;
}

/* Deep Table Styles from XGRPH.vue */
:deep(.el-table) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-table tr:nth-child(odd)) {
  background-color: #0f2142 !important;
}

:deep(.el-table tr:nth-child(even)) {
  background-color: #142a52 !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: rgba(66, 180, 255, 0.1) !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell) {
  background-color: transparent !important;
  border-color: #06279d !important;
  color: #c0c4cc;
}

:deep(.el-table th.el-table__cell) {
  color: #b8e8ff;
  background-color: #183272 !important;
  border-bottom: 1px solid #06279d !important;
}

:deep(.el-table--border .el-table__inner-wrapper::after),
:deep(.el-table--border::after),
:deep(.el-table--border::before),
:deep(.el-table__border-left-patch),
:deep(.el-table--border .el-table__inner-wrapper::before) {
  background-color: #06279d !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #06279d !important;
}

:deep(.el-table--border td.el-table__cell),
:deep(.el-table--border th.el-table__cell) {
  border-right: 1px solid #06279d !important;
}

:deep(.el-table__body-wrapper) {
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #142a52;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #3a5a8a;
  border-radius: 3px;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}
</style>